import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import Animation from './Animation';

export default class AnimationGroup extends React.Component {
  static propTypes = {
    style: PropTypes.any,
    totalDelay: PropTypes.number,
    delay: PropTypes.number,
    easing: PropTypes.any,
    reverseDelay: PropTypes.bool,
    enter: PropTypes.object,
    leave: PropTypes.object,
    showing: PropTypes.bool,
    onAnimationEnd: PropTypes.func,
  };

  static defaultProps = {
    easing: 'ease',
    delay: 30,
    totalDelay: 0,
  };

  render() {
    const {
      style,
      easing,
      enter,
      delay,
      totalDelay,
      leave,
      showing,
      children,
      onAnimationEnd,
      reverseDelay,
    } = this.props;
    return (
      <View style={[{ flex: 1, alignItems: 'center' }, style]}>
        {React.Children.map(children, (child, index) => {
          if (!child) {
            return null;
          }
          return (
            <Animation
              {...child.props}
              easing={easing}
              enter={{ ...enter, delay: totalDelay + delay * index }}
              leave={{
                ...leave,
                delay:
                  (reverseDelay ? this.props.children.length - index - 1 : index) * delay +
                  totalDelay,
              }}
              showing={showing}
              onAnimationEnd={
                (reverseDelay ? 0 : this.props.children.length - 1) === index
                  ? onAnimationEnd
                  : undefined
              }>
              {child.props.children}
            </Animation>
          );
        })}
      </View>
    );
  }
}
